<template>
  <view class="index-page">

    <view class="index-header-box">
      <image class="index-header-photo" src="/static/icon/index-header-bg.jpg"></image>
    </view>

    <view class="index-content-box">

      <view class="main-container">
        <view class="tabs" :class="['active'+type]">
          <view :class="[type === 1 ? 'active': '', 'tab-item tab-item1']" @click="updateType(1)">酒店</view>
          <view :class="[type === 2 ? 'active': '', 'tab-item tab-item2']" @click="updateType(2)">时租房</view>
          <view :class="[type === 3 ? 'active': '', 'tab-item tab-item3']" @click="updateType(3)">民宿</view>
        </view>
        <view class="form">
          <view v-if="type === 1" class="cell">
            <!-- <view class="label">{{hotelName || '点击定位'}}</view> -->
            <!-- <image class="icon" src="/static/icon/position-icon.png" @click="getLocate"></image> -->
            <picker @change="bindPickerChange" :value="hotel_index" range-key="hotel_name" :range="hotelList" style="width: 100%;">
              <div class="u-flex u-col-center u-row-bettwen">
                <view class="label">{{hotelName || '-'}}</view>
                <u-icon name="arrow-right"></u-icon>
              </div>
            </picker>
            
          </view>
          <view class="cell" @click="openCancard">
            <view class="label">
              <view class="time-item">
                <view class="date">{{startDate}}</view>
                <view class="day">入住</view>
              </view>
              <view class="line"></view>
              <view class="time-item">
                <view class="date">{{endDate}}</view>
                <view class="day">离开</view>
              </view>
            </view>
            <view class="night" v-if="dayNum">共{{dayNum}}晚</view>
          </view>
          <view class="cell">
            <image class="icon search-icon" src="/static/icon/search-icon.png"></image>
            <input class="label" v-model.trim="payload.label" type="text" placeholder="酒店名称/酒店标签">
          </view>
          <view class="btn">
            <u-button type="primary" @click="handleQuery">查询</u-button>
          </view>
        </view>
      </view>

      <view v-if="type === 1" class="banner-list">
        <view v-if="couponData.length > 0" class="coupon-wrapper">
          <view v-for="(item,index) in couponData" :key="index" class="item" v-show="!item.is_received">
            <image class="coupon-bg" src="/static/icon/coupon-bg.png"></image>
            <view class="info">
              <view class="name">{{item.title}}</view>
              <view class="introduce">
                订单满{{item.total_price}}
                <text v-if="item.condition == 2">打{{item.discount}}折</text>
                <text v-else>减{{item.discount_price}}元</text>
              </view>
            </view>
            <view class="btn" @click="receive(item)">去领取</view>
          </view>
        </view>
      </view>

      <!-- <view v-else-if="type === 2" class="hotel-list-wrapper">
        <view class="hotel-tabs">
          <view 
            v-for="item in modeList" 
            :key="item.value" 
            :class="{ 'hotel-tab-item': true, active: mode === item.value }" 
            @click="updateMode(item.value)"
          >
            {{item.label}}
          </view>
        </view>
        <view class="hotel-list">
          <hotel-item v-for="item in 3" :key="item"></hotel-item>
        </view>
      </view> -->

    </view>

    <!-- 日历 -->
    <zb-calendar type="range" ref="calendar" :disabledDate="disabledDate" v-model="dateRange"
      @input="updateDate"></zb-calendar>

    <!-- 底部导航 -->
    <fa-tabbar></fa-tabbar>
  </view>
</template>

<script>
  const app = getApp();
  import moment from 'moment/moment';

  export default {
    data() {
      return {
        type: 1,
        mode: 1,
        modeList: [{
            label: '猜你喜欢',
            value: 1
          },
          {
            label: '离我最近',
            value: 2
          },
          {
            label: '嗨玩电竞',
            value: 3
          },
          {
            label: '情侣约会',
            value: 4
          }
        ],
        hotelName: '',
        dateRange: [],
        payload: {},
        // 首页优惠券
        couponData: [],
        disabledDate(item) {
          const val = new Date(item).getTime();
          const cur = Date.now() - 24 * 60 * 60 * 1000;
          if (val < cur) {
            return true
          }
          return false;
        },
        hotelList:[],
        hotel_index:0
      };
    },
    onLoad() {
      // this.$u.vuex('vuex_token', 'ce7d5bf6-e6d8-47d0-8fc0-6f0e09810a5d')
      // this.$u.vuex('vuex_token', 'c6487759-7fcf-4cda-8df3-de9df6b0d9f2')

      console.log('有没有token', this.vuex_token)
      // this.getLocate()
      this.getHotelList();
      this.payload = app.globalData.hotelPayload
      const start = moment().format('YYYY-MM-DD'),
        end_time = moment(Date.now() + 24 * 3600 * 1000).format('YYYY-MM-DD')
      this.payload.start = start
      this.payload.end_time = end_time
      this.dateRange = [start, end_time]

    },
    onShow() {
      this.loadCoupon()
    },
    computed: {
      startDate() {
        return moment(this.dateRange[0]).format('MM月DD日')
      },
      endDate() {
        return moment(this.dateRange[1]).format('MM月DD日')
      },
      dayNum() {
        const [start, end] = this.dateRange
        const distance = new Date(end).getTime() - new Date(start).getTime()
        return distance / (24 * 3600 * 1000)
      },
      notice() {
        let arr = [];
        if (this.vuex_config.notice) {
          this.vuex_config.notice.map(item => {
            arr.push(item.title);
          });
        }
        return arr;
      },
      navigates() {
        if (this.vuex_config.navigate) {
          let arr1 = [],
            arr2 = [];
          this.vuex_config.navigate.forEach((item, index) => {
            if (((index + 1) % 9 == 0 && index != 0) || index + 1 == this.vuex_config.navigate.length) {
              arr2.push(item);
              arr1.push(arr2);
              arr2 = [];
            } else {
              arr2.push(item);
            }
          });
          this.navigateList = arr1;
        }
        return 1;
      }
    },
    methods: {
      getHotelList(){
        this.$api.getHotelListApi().then(res=>{
          this.hotelName = res.data[0].hotel_name;
          this.hotelList = res.data
        })
      },
      getLocate() {
        app.getLocate((res) => {
          this.$api.getRecentHotelsApi(res).then(resu => {
            this.hotelName = resu.data.hotel_name
            app.globalData.locate.hotelName = resu.data.hotel_name
          })
        })
      },
      // 打开日历
      openCancard() {
        this.$refs.calendar.open()
      },
      // 更新日期
      updateDate() {
        console.log('首页---this.dateRange', this.dateRange)
        this.payload.start = this.dateRange[0]
        this.payload.end_time = this.dateRange[1]
      },
      handleQuery1() {
        if (this.type === 2) {
          uni.navigateTo({
            url: '/rentalHousing/index/index'
          })
        } else if (this.type === 1) {
          uni.navigateTo({
            url: '/pages/index/hotel'
          })
        } else {
          uni.navigateTo({
            url: '/pages/index/famous'
          })
        }
      },
      handleQuery() {
        // this.handleQuery1()
        console.log('---', app.globalData.locate.hotelName)
        if(app.globalData.locate.hotelName){
          this.handleQuery1()
        }else{
          app.getLocate((res) => {
            this.$api.getRecentHotelsApi(res).then(resu => {
              app.globalData.locate.hotelName = resu.data.hotel_name
            })
          })
        }
        
      },
      updateType(type) {
        if (this.type !== type) {
          this.type = type
        }
      },
      updateMode(mode) {
        if (this.mode !== mode) {
          this.mode = mode
        }
      },
      // 查询优惠券
      loadCoupon() {
        uni.showLoading({
          mask: true,
        })
        this.$api.getOrdinaryCouponListApi().then(res => {
          uni.hideLoading()
          if (res.code === 1) {
            this.couponData = res?.data || []
          } else {
            this.couponData = []
          }
        }).catch(() => {
          uni.hideLoading()
          this.couponData = []
        })
      },
      // 领取优惠券
      receive(item) {
        if (item.is_received) {
          uni.showToast({
            icon: 'none',
            title: '请勿重复领取'
          })
          return
        }
        uni.showLoading({
          mask: true,
        })
        this.$api.drawCouponApi({
          id: item.id
        }).then(() => {
          uni.hideLoading()
          uni.showToast({
            icon: 'success',
            title: '领取成功'
          })
        }).catch(() => {
          uni.hideLoading()
        })
      }
    },
    //下拉刷新
    onPullDownRefresh() {},
    onReachBottom() {}
  };
</script>

<style lang="scss">
  page {
    background-color: #f2f5fa;
  }
</style>
<style lang="scss" scoped>
  .index-page {
    overflow: hidden;
    position: relation;

    .index-header-box {
      width: 100%;
      height: 546rpx;
      position: absolute;
      z-index: 2;

      .index-header-photo {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .index-content-box {
      padding-top: 322rpx;
      position: relative;
      z-index: 3;
      width: 100%;
      overflow: hidden;

      .main-container {
        width: 710rpx;
        margin: 0 auto;
        border-radius: 16rpx;
        background-color: #fff;

        .tabs {
          height: 76rpx;
          @include flex;

          &.active1 {
            .tab-item {
              &.tab-item2 {
                border-radius: 0rpx 0 0rpx 50rpx;
              }
            }
          }

          &.active2 {
            .tab-item {
              &.tab-item1 {
                border-radius: 16rpx 0px 50rpx 0rpx;
              }

              &.tab-item3 {
                border-radius: 0rpx 16rpx 0rpx 50rpx;
              }
            }
          }

          &.active3 {
            .tab-item {
              &.tab-item2 {
                border-radius: 0rpx 0rpx 50rpx 0rpx;
              }
            }
          }

          .tab-item {
            flex: 1;
            line-height: 76rpx;
            font-size: 30rpx;
            color: #3C3D3E;
            text-align: center;
            background-color: #EFF0F4;

            &:tab-item1 {
              border-radius: 16rpx 0rpx 50rpx 0rpx;
            }

            &:tab-item3 {
              border-radius: 0rpx 16rpx 0rpx 50rpx;
            }

            &.active {
              background-color: #fff;
              color: $uni-color-primary;
              position: relative;
              border-radius: 0;

              &::before {
                content: '';
                width: 100%;
                height: 10rpx;
                position: absolute;
                top: -10rpx;
                left: 0;
                border-radius: 10rpx 10rpx 0 0;
                background-color: #fff;
              }

              &::after {
                content: '';
                width: 72rpx;
                height: 8rpx;
                background: $uni-color-primary;
                border-radius: 4rpx;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
              }
            }
          }
        }

        .form {
          width: 610rpx;
          margin: auto;

          .cell {
            @include flex;
            border-bottom: 1px solid #eee;

            .label {
              flex: 1;
              height: 106rpx;
              line-height: 106rpx;
              font-size: 30rpx;
              color: #333;
              @include flex(row, center, flex-start);

              .time-item {
                color: #333;
                @include flex(row, center, flex-start);

                .date {
                  font-size: 32rpx;
                }

                .day {
                  font-size: 24rpx;
                  margin: 6rpx 6rpx 0;
                }
              }

              .line {
                width: 18rpx;
                height: 2px;
                background-color: #999;
                margin: 0 30rpx;
              }
            }

            .icon {
              width: 40rpx;
              height: 40rpx;
            }

            .search-icon {
              margin-right: 4rpx;
            }
          }

          .btn {
            padding-top: 76rpx;
            padding-bottom: 70rpx;
          }
        }
      }

      .banner-list {
        width: 710rpx;
        margin: 30rpx auto 0;
        overflow: hidden;

        .banner {
          width: 100%;
          height: 200rpx;
          display: block;
          margin-bottom: 30rpx;
        }

        .coupon-wrapper {
          overflow: hidden;

          .item {
            width: 100%;
            height: 148rpx;
            margin-bottom: 30rpx;
            position: relative;

            .coupon-bg {
              width: 100%;
              height: 100%;
              display: block;
            }

            .info {
              position: absolute;
              left: 144rpx;
              top: 50%;
              transform: translateY(-50%);

              .name {
                font-size: 32rpx;
                line-height: 44rpx;
                color: #28292A;
                margin-bottom: 6rpx;
              }

              .introduce {
                line-height: 34rpx;
                font-size: 24rpx;
                color: #6C88AA;
              }
            }

            .btn {
              width: 148rpx;
              height: 64rpx;
              line-height: 64rpx;
              text-align: center;
              background: #2A70F9;
              border-radius: 32rpx;
              font-size: 28rpx;
              color: #fff;
              position: absolute;
              right: 64rpx;
              top: 50%;
              margin-top: -32rpx;
            }
          }
        }
      }

      .hotel-list-wrapper {
        background-color: #fff;
        width: 710rpx;
        margin: 30rpx auto 0;
        border-radius: 16rpx;

        .hotel-tabs {
          height: 88rpx;
          line-height: 88rpx;
          width: 100%;
          @include flex;

          .hotel-tab-item {
            flex: 1;
            text-align: center;
            color: #333333;
            font-size: 30rpx;
            font-weight: bold;

            &.active {
              color: $uni-color-primary;
              position: relative;

              &::after {
                content: '';
                width: 72rpx;
                height: 8rpx;
                background: #2A70F9;
                border-radius: 4rpx;
                position: absolute;
                bottom: 4rpx;
                left: 50%;
                transform: translateX(-50%);
              }
            }
          }
        }
      }
    }
  }

  .hotel-list {
    overflow: hidden;
  }
</style>